<template>
  <div class="auditCmpt">
    <!-- {{carrier}} -->
    <!-- 查询表单 -->
    <div v-if="!isCouponDetail">
      <div class="form-baseinfo">
        <LPSearchBar
          v-model="searchModel"
          :search-data="searchData"
          label-width="100px"
          @handleSearchSubmit="handleSearchSubmit"
          @handleSearchReset="handleSearchReset"
        />
      </div>
      <!-- 表格列表 -->
      <div class="form-baseinfo">
        <div class="btn_area">
          <el-button size="medium" type="primary" @click="exportInfo">导出数据</el-button>
        </div>
        <LPTablePage
          :show-index="false"
          :show-indexfixed="false"
          index-label="顺序"
          :table-data="tableData"
          :table-column="tableColumn"
          :total="total"
          :current-page="currentPage"
          align="center"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        >
          <template slot="couponModels" slot-scope="{ row }">
            <div v-if="row.couponModels.length > 0">
              <div v-for="(item, index) in row.couponModels" :key="index">
                <el-link type="primary" @click="goToCouponManage(item.couponId)">{{ item.couponName }}</el-link>
              </div>
            </div>
          </template>
          <template slot="couponModels1" slot-scope="{ row }">
            <div v-if="row.couponModels.length > 0">
              <div v-for="(item, index) in row.couponModels" :key="index">
                <div>{{ item.recordId }}</div>
              </div>
            </div>
          </template>

          <template slot="status" slot-scope="{ row }">
            <span v-if="row.status === 0" class="status0">等待审核</span>
            <span v-else-if="row.status === 1" class="status1">等待分配</span>
            <span v-else-if="row.status === 2" class="status2">配送中</span>
            <span v-else-if="row.status === 3" class="status2">已配送</span>
            <span v-else-if="row.status === 9" class="status9">已取消</span>
          </template>
          <template slot="ordersNo" slot-scope="{ row }">
            <el-link type="primary" @click="clickSoNO(row)">{{ row.ordersNo }}</el-link>
          </template>
          <template slot="couponName" slot-scope="{ row }">
            <el-link type="primary" @click="couponDetail(row)">{{ row.couponName }}</el-link>
          </template>
          <template slot="cz" slot-scope="{ row }">
            <el-button type="text" @click="handColumnClick(row, 'detail')">
              <i class="iconfont icon-xiangqing-" />
              查看详情
            </el-button>
            <el-button
              v-hasPermi="['Logistics.Delivery.Update']"
              type="text"
              style="color: #00c853"
              @click="handColumnClick(row, 'pass')"
            >
              <i class="iconfont icon-tongguo" />
              通过
            </el-button>
            <el-button
              v-hasPermi="['Logistics.Delivery.Update']"
              type="text"
              style="color: #e24e3d"
              @click="handColumnClick(row, 'reject')"
            >
              <i class="iconfont icon-cuowu" />
              拒绝
            </el-button>
          </template>
        </LPTablePage>
      </div>
    </div>
    <div v-else class="form-baseinfo">
      <coupon-detail :coupon-id="couponId" @detailClose="detailClose" />
    </div>
  </div>
</template>

<script>
import { getProductsLog, getByIdOrderData } from '@/api/LaborProtection/order'
import { parseTime } from '@/utils/lpUtils.js'
import { GetProductLogExcel } from '@/api/LaborProtection/export'
import { download } from '@/utils/lpUtils'
import couponDetail from '@/views/LaborProtection/couponManage/detail.vue'
import LPTablePage from '@/components/LPTablePage/index.vue'
import LPSearchBar from '@/components/LPSearchBar/index.vue'

export default {
  name: 'SalesFlow1',
  components: {
    couponDetail,
    LPTablePage,
    LPSearchBar
  },
  data() {
    return {
      searchModel: {},
      searchData: [
        { label: '', placeholder: '员工卡号', prop: 'UserCardNo', width: '80px' },
        { label: '', placeholder: '员工姓名', prop: 'UserName', width: '80px' },
        { label: '', placeholder: '关联单号', prop: 'ordersNo', width: '80px' },
        { label: '', placeholder: '员工工号', prop: 'userJobNum' },
        {
          label: '',
          placeholder: '交易方式',
          prop: 'LType',
          type: 'select',
          width: '80px',
          option: [
            {
              label: '销售',
              value: 1
            },
            {
              label: '退货',
              value: 2
            },
            {
              label: '销售取消',
              value: 3
            }
          ]
        },
        { label: '', placeholder: '商品名称', prop: 'PTitle', width: '60px' },

        // { label: '发放记录编号', placeholder: '请输入', prop: 'UserName', width: "95px" },
        // { label: '优惠券名称', placeholder: '请输入', prop: 'UserName', width: "80px" },
        { label: '', prop: 'StartOrderTime', type: 'datetimerange', placeholder: '开始时间', width: '80px' }
      ],
      // 列表数据
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: '物料编码', prop: 'pNo' },
        { label: '物料名称', prop: 'pTitle' },
        { label: '员工卡号', prop: 'userCardNo' },
        { label: '员工工号', prop: 'userJobNum' },
        { label: '员工姓名', prop: 'userName' },
        { label: '部门', prop: 'departmentName' },
        { label: '岗位', prop: 'jobName' },
        { label: '购买数量', prop: 'pCount' },
        { label: '物料单价', prop: 'pPrice' },
        { label: '交易金额', prop: 'pMoney' },
        { label: '交易方式', prop: 'lTypeName' },
        { label: '创建日期', prop: 'createTime' },
        { label: '关联单号', prop: 'ordersNo', render: true },
        { label: '优惠券名称', prop: 'couponModels', render: true },
        { label: '优惠券发放编码', prop: 'couponModels1', render: true }
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      couponId: '',
      isCouponDetail: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    goToCouponManage(id) {
      this.$router.push({
        path: '/laborProtection/couponManage',
        query: {
          data: JSON.stringify({
            id: id,
            back: '/laborProtection/order/salesFlow'
          })
        }
      })
    },
    detailClose() {
      this.couponId = ''
      this.isCouponDetail = false
    },
    couponDetail(row) {
      this.couponId = row.id
      this.isCouponDetail = true
    },
    getList() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      if (typeof this.searchModel.StartOrderTime !== 'undefined') {
        params.SDateTime = parseTime(this.searchModel.StartOrderTime[0])
        params.EDateTime = parseTime(this.searchModel.StartOrderTime[1])
        this.$delete(params, 'StartOrderTime')
      }
      getProductsLog(params).then((res) => {
        this.tableData = res.items
        this.total = res.totalCount
      })
    },
    clickSoNO(row) {
      console.log(row)
      if (row.lType == 2) {
        this.$router.push({
          path: '/laborProtection/order/returnOrderManage/detail',
          query: {
            data: JSON.stringify({
              id: row.ordersId,
              isAudit: false,
              lType: 1
            })
          }
        })
      } else {
        getByIdOrderData(row.ordersId).then((res) => {
          if (res.soType == 1) {
            this.$router.push({
              path: '/laborProtection/order/detail',
              query: {
                data: JSON.stringify({
                  id: row.ordersId,
                  isAudit: false,
                  lType: 1
                })
              }
            })
          } else {
            this.$router.push({
              path: '/remoteOrder/components/detail',
              query: {
                data: JSON.stringify({
                  id: row.ordersId,
                  isDetail: true,
                  lType: 1
                })
              }
            })
          }
        })
      }
    },
    insertData() {
      this.$router.push({
        path: '/laborProtection/order/returnOrderManage/detail',
        query: {
          list: 120
        }
      })
    },
    // 查询按钮
    handleSearchSubmit() {
      this.currentPage = 1
      this.getList()
    },
    // 重置按钮
    handleSearchReset() {
      this.handleSearchSubmit()
    },
    // 获取列表
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      // console.log(v)
      this.getList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      // console.log(v)
      this.getList()
    },
    handColumnClick(row, name) {
      // 等待审核-通过
      if (name == 'pass') {
        this.handleAuditPass(row.id)
      }
      // 等待审核-拒绝
      else if (name == 'reject') {
        this.handleAuditReject(row.id)
      }
      // 查看详情
      else if (name == 'detail') {
      }
    },
    exportInfo() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      if (typeof this.searchModel.StartOrderTime !== 'undefined') {
        params.SDateTime = parseTime(this.searchModel.StartOrderTime[0])
        params.EDateTime = parseTime(this.searchModel.StartOrderTime[1])
        this.$delete(params, 'StartOrderTime')
      }
      GetProductLogExcel(params).then((res) => {
        download(res, '产品销售流水')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.auditCmpt {
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  .form-baseinfo:first-child {
    margin: 20px, 0, 20px, -10px;
    border-radius: 3px;
  }
  .form-baseinfo:last-child {
    background-color: #fff;
    .btn_area {
      padding: 0.2rem;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
  }
}
.form-baseinfo {
  // border: 1px solid #dcdfe6;
  // padding: 10px;
}

.btn_area {
  margin-bottom: 0.1rem;
  padding-left: 0.1rem;
}

::v-deep .search-bar input.el-input__inner {
  width: 1.6rem;
}
</style>
